<template>
    <div id="app" class="index">
      <!--nav-->
      <div class="Nav">
        <Nav></Nav>
      </div>
      <!--/nav-->
      <div class="content">
        <div>
          <div class="lun">
            <el-carousel height="400px" style="width: 900px;margin-left: 50px" direction="vertical" :autoplay="true">
              <el-carousel-item v-for="img in item" :key="img">
                <img style="height: 400px;width: 900px;border-radius: 5px" :src="img" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
          <!--hot-->
          <div class="hot_movie">
            <!--热门电影头部标签-->
            <div class="hot_title">
              <i class="el-icon-medal-1" style="color: skyblue"></i>
              <span>热门电影</span>
            </div>
            <!--热门电影-->
            <div class="hot_content">
              <div v-for="(item,index) in HotData.slice(0,8)" :key="index">
                <el-card @click.native="toScore(item.id)" :body-style="{ padding: '0px' }" class="card" style="width: 200px;height: 250px;float: left" shadow="hover">
                  <div style="width: 100px;height: 20px;margin-left: 60px;padding: 2px;">
                    <span>{{item.name}}</span>
                  </div>
                  <img style="width: 150px;height: 180px;margin-left: 25px;margin-top: 5px" :src="'static/img/'+item.img" alt="">
                  <div style="width:180px;height: 20px;margin-left: 25px;padding: 2px;margin-top: 5px">
                    <span style="font-size: 10px">{{item.actors}}</span>
                  </div>
                </el-card>
              </div>


            </div>
            <!--分页-->
            <div></div>
          </div>
          <!--new-->
          <div class="new_movie">
            <!--最新电影头部标签-->
            <div>
              <i class="el-icon-data-board" style="color: skyblue"></i>
              <span>最新电影</span>
            </div>
            <!--最新电影内容-->
            <div class="new_content">
              <div v-for="(item,index) in NewData.slice(0,8)" :key="index">
                <el-card @click.native="toScore(item.id)" :body-style="{ padding: '0px' }" class="card" style="width: 200px;height: 250px;float: left" shadow="hover">
                  <div style="width: 100px;height: 20px;margin-left: 60px;padding: 2px;">
                    <span>{{item.name}}</span>
                  </div>
                  <img style="width: 150px;height: 180px;margin-left: 25px;margin-top: 5px" :src="'static/img/'+item.img" alt="">
                  <div style="width:180px;height: 20px;margin-left: 25px;padding: 2px;margin-top: 5px">
                    <span style="font-size: 10px">{{item.actors}}</span>
                  </div>
                </el-card>
              </div>

            </div>
            <!--分页-->
            <div></div>
          </div>
        </div>
      </div>
      <!--Footer-->
      <div class="footer" style="margin-top: 20px">
        <Footer></Footer>
      </div>
      <!--/Footer-->
    </div>
</template>

<script>
  import Nav from "../components/Nav";
  import Footer from "../components/Footer";
    export default {
      name: "Index",
      data(){
        return{
          HotData:[{}],
          NewData:[{}],
          item:[
            require('../assets/lun/1.jpg'), require('../assets/lun/2.jpg'), require('../assets/lun/3.jpg')
          ]
        }
      },
      methods:{
        /*查询热门电影*/
        selectHot(){
          let _this = this
          this.$axios.get("http://localhost:8088/film/selectFilmByHot").then(function (res) {
              _this.HotData = res.data
              console.log(_this.HotData)
          }).catch(function (err) {
              alert('热门电影查询失败')
          })
        },
        /*查询最新电影*/
        selectNews(){
          let _this = this
          this.$axios.get("http://localhost:8088/film/selectFilmByNews").then(function (res) {
              _this.NewData = res.data
            console.log(_this.NewData)
          }).catch(function (err) {
            alert('最新电影查询失败')
          })
        },
        toScore(id){
          this.$router.push({name:'Score',query:{id:id}})
        }
      },
      components:{
        Nav,
        Footer
      },
      mounted() {
        this.selectHot()
        this.selectNews()
        window.scrollTo(0,0)
      }
    }
</script>

<style scoped>
  .card span{
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .card{
    margin-left: 30px;
    margin-top: 20px;
  }


  .new_movie{
    float: left;
    height: 550px;
    width: 940px;
    margin-left: 10px;
    /*background-color: gray;*/
    border-radius: 5px;
    padding: 20px;
  }
  .hot_movie{
    float: left;
    height: 550px;
    width: 940px;
    margin-left: 10px;
    /*background-color: gray;*/
    border-radius: 5px;
    padding: 20px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }


  .content{
    border-radius: 5px;
    width: 1000px;
    height: 1600px;
    background-color: white;
    margin-top: 20px;
    margin-left: 270px;
  }
  .index{
    width: 100%;
    height: 1700px;
    background-color: rgba(238,236,237,0.94);
  }
</style>
